<template>
    <div class="monitor-container">

       
            <div class="icon smoke-normal" style="left: 25%; top: 30%;"></div>

            <div class="icon th-normal" style="left: 35%; top: 50%;"></div>

            <div class="icon smoke-alarm" style="left: 62%; top: 30%;"></div>

            <div class="icon th-alarm" style="left: 80%; top: 50%;"></div>
            
        

    </div>

</template>

<script>
import * as echarts from 'echarts'
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls"
import notification from 'ant-design-vue/es/notification'
import request from '@/utils/request'
import defaultSettings from '@/config/defaultSettings'
import vueSeamlessScroll from 'vue-seamless-scroll'
import screenfull from "screenfull";
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
    name: 'bigScreen',
    components: {
        vueSeamlessScroll
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#11192e')
    },
 
    beforeDestroy() {
       document.querySelector('body').removeAttribute('style')
    },

    data () {
        return {
            defaultSettings,
            isFullscreen: false,
            token:null,
            eqStateList:[],
            timmer:null,
            eqStateChannel: new BroadcastChannel('eqState')
           
        }
    },
    // 监听属性 类似于data概念
    computed: {
        

    },
    created () {
       this.token=sessionStorage.getItem(ACCESS_TOKEN)
    },
    mounted () {
        let that = this
        that.eqStateChannel.onmessage = (event) => {
            this.eqStateList=event.data
        }

        that.$nextTick(() => {
            that.query()
            if (screenfull.isEnabled) {
                screenfull.on('change', this.fullChange)
            }
        })
    },
    destroy () {
        if (screenfull.isEnabled) {
            screenfull.off('change', this.fullChange)
        }
    },
    methods: {
        fullChange (){
            this.isFullscreen = screenfull.isFullscreen
        },
        //全屏
        fullScreen () {
            if (!screenfull.isEnabled) {
                return false
            }
            //全屏
            screenfull.toggle();
        },
       
       query(){
        if(this.eqStateList.length==0){
            console.log("主动查询")
            
        }
        console.log("推送数据")
        if(this.timmer){
            clearTimeout(this.timmer)
        }
        this.timmer = setTimeout(() => {this.query()}, 30000)
        
       }
      
       
    }
}
</script>


<style lang="less" scoped> 
   
   .monitor-container {
        position: relative;
        width: 1200px;
        height: 800px;
        overflow: auto;
        background-image: url('./img/1111.gif');
        background-size: cover; /* 背景图覆盖整个div */
        background-position: center; /* 背景图居中显示 */
    }

    
 
    .icon{
        width: 30px;
        height: 30px;
        background-size: cover; /* 背景图覆盖整个div */
        background-position: center; /* 背景图居中显示 */
        transform: translate(-50%, -50%);
        cursor: pointer;
        transition: transform 0.3s ease;
        position:absolute
    }

    .icon:hover {
        transform: translate(-50%, -50%) scale(1.15);
    }

    .icon.smoke-normal{
        background-image: url('./img/smoke.svg');
    }

    .icon.smoke-alarm{
        background-image: url('./img/smoke-alarm.svg');
    }

    .icon.smoke-off{
        background-image: url('./img/smoke-off.svg');
    }

    .icon.th-normal{
        background-image: url('./img/th.svg');
    }

    .icon.th-alarm{
        background-image: url('./img/th-alarm.svg');
    }

    .icon.th-off{
        background-image: url('./img/th-off.svg');
    }


</style>

